{% extends 'layout/basic.html' %}

{% load static %}

{% block title %}项目中心{% endblock %}

{% block css %}
    <style>
        .project {
            margin-top: 5px;
        }

        .panel-success .panel-heading {
            padding: 5px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

        }

        /* panel-body  flex布局。 */
        .panel-body {
            padding: 0;
            display: flex; /* flex布局 */
            flex-direction: row; /* 按行排列 */
            justify-content: left; /* 从左边开始排列 */
            align-items: flex-start; /* 垂直方式 从上到下；默认值 */
            flex-wrap: wrap; /* 允许子元素换行 */
        }

        /* panel-body 的子元素 item */
        .panel-body > .item {
            border-radius: 6px;
            width: 200px;
            border: 1px solid #dddddd;
            margin: 20px 10px;

        }

        .panel-body > .item:hover {
            border: 1px solid #f0ad4e;
        }

        .panel-body > .item > .title {
            height: 100px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            font-size: 15px;
            text-decoration: none;
        }

        .panel-body > .item > .info {
            padding: 10px 10px;

            display: flex;
            justify-content: space-between;

            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;

        }

        .panel-body > .item > .info a {
            text-decoration: none;
        }

        th {
            text-align: center;
        }

        td {
            text-align: center;
        }

        .flex-container {
            display: flex;
            flex-wrap: wrap; /* 如果需要换行，可以启用这个属性 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 均匀分布元素之间的空间 */
        }

        .flex-item {
            /* 你可能不需要为flex-item设置特定的样式，这取决于你的具体需求 */
            /* 例如，如果你想要标签和输入框之间有更多空间，你可以给flex-item添加margin */
            margin-right: 2px; /* 右侧间距 */
        }

        /* 如果你不想让最后一个元素（按钮）也有右侧间距，可以添加一个特定的类来覆盖它 */
        .flex-container .btn-xs {
            margin-right: 0;
        }

        /* 注意：由于使用了flex-wrap: wrap; 和 justify-content: space-between;
           如果容器宽度不足以容纳所有元素，它们将自动换行，并且每行的元素将均匀分布。
           如果你希望它们始终在同一行上，请确保容器宽度足够大，或者移除flex-wrap属性。
        */

    </style>
{% endblock %}

{% block content %}
    <!-- 工具栏 占位 -->

    <div class="container-fluid ">
        {#                <div class="row" style="text-align: center">#}
        {#                    <div class="col-md-3">占位1</div>#}
        {#                    <div class="col-md-3">占位2</div>#}
        {#                    <div class="col-md-3">占位3</div>#}
        {#                    <div class="col-md-3">占位4</div>#}
        {#                </div>#}
        <span id="txt"
              style="color: #b92c28">默认显示60天之前所有SA创建的项目信息！    默认显示60天之前所有SA创建的项目信息！</span>
        {#    <div class="row" style="text-align: center">#}
        {#        <div class="col-md-12">#}
        {#            <span id="txt" style="color: #b92c28">默认显示60天之前所有SA创建的项目信息！    </span>#}
        {##}
        {#        </div>#}
        {#    </div>#}
    </div>


    <!-- 项目列表 -->
    <div class="container-fluid ">
        <div class="panel panel-success">
            <div class="panel-heading">
                <div>
                    <i class="fa fa-list" aria-hidden="true"> 项目汇总</i>
                </div>

                <!-- class="form-inline flex-container" 定义类  -->
                <form id="project_form" method="get" class="form-inline flex-container">
                    <div class="form-group">
                        <label for="SR_name" class="flex-item">SR No:</label>
                        <input type="text" id="SR_name" name="SR_name" class="form-control flex-item"
                               style="height: 22px;width: 90px" placeholder="call number"
                               value="{{ data_dict.SR_No__contains }}">
                    </div>
                    <div class="form-group">
                        <label for="owner_sa" class="flex-item">Owner:</label>
                        <input type="text" id="owner_sa" name="owner_sa" class="form-control flex-item"
                               style="height: 22px;width: 90px" placeholder="输入SA名字"
                               value="{{ data_dict.sa__SA_CName__contains }}">
                    </div>
                    <div class="form-group">
                        <label for="p_status" class="flex-item">状态:</label>
                        <select name="p_status" id="p_status" class="flex-item"
                                style="height: 22px; border-radius: 4px; border: 1px solid #cccccc">
                            {#  这个value='all' 传到view后，需要重新定义 #}
                            <option value="all">所有状态</option>
                            <option value="Completed">已完成</option>
                            <option value="Ongoing">进行中</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="start_d" class="flex-item">开始日期:</label>
                        <input type="date" id="start_d" name="start_d" class="form-control flex-item"
                                {#   style="height: 22px;width: 120px" value="{{ s_date|date:'Y-m-d' }}">#}
                               style="height: 22px;width: 120px" value="{{ data_dict.start_date__gte }}">
                    </div>
                    <div class="form-group">
                        <label for="end_d" class="flex-item">结束日期:</label>
                        {#        <p>Debug: {{ end_date }}</p>#}
                        <input type="date" id="end_d" name="end_d" class="form-control flex-item"
                                {# style="height: 22px;width: 120px" value="{{ e_date|date:"Y-m-d" }}">#}
                               style="height: 22px;width: 120px" value="{{ data_dict.end_date__lte }}">
                    </div>

                    <div class="form-group">
                        <label for="p_name" class="flex-item">关键字:</label>
                        <input type="text" id='p_name' name="p_name" class="form-control flex-item"
                               placeholder="项目名(客户名)"
                               value="{{ data_dict.customer__name__contains }}" style="height: 22px;width: 120px">
                    </div>
                    <div class="form-group">
                        <label for="big_p" class="flex-item">大项目：</label>
                        <input type="checkbox" id="big_p" name="big_p" style="width: 17px; height: 17px;"
                               class="flex-item" {% if data_dict.big_project %}checked{% endif %} >
                    </div>

                    <button class="btn btn-primary btn-xs flex-item" type="submit" style="margin-left: 3px">
                        <i class="fa fa-search" aria-hidden="true"> 搜索</i>
                    </button>
                    <button onclick='clearSearch_p()' class="btn btn-primary btn-xs flex-item" type="button"
                            style="margin-left: 2px">
                        <i class="fa fa-undo" aria-hidden="true"> 重置</i>
                    </button>
                    <button id="export-pj" type="button" class="btn btn-primary btn-xs flex-item"
                            style="margin-left: 2px">
                        <i class="fa fa-cloud-download" aria-hidden="true"> 项目</i>
                    </button>
                    <button id="export-task" type="button" class="btn btn-primary btn-xs flex-item"
                            style="margin-left: 2px">
                        <i class="fa fa-cloud-download" aria-hidden="true"> 任务</i>
                    </button>
                </form>
            </div>
            <div class="panel-body">
                <table class="table table-hover table-condensed">
                    <thead>
                    <tr style="color: #2aabd2">
                        <th>SR No#</th>
                        <th>客户&项目</th>
                        <th>Owner</th>
                        <th>分类</th>
                        <th>软件</th>
                        <th>版本</th>
                        <th>服务器</th>
                        <th>MFD</th>
                        <th>打印机</th>
                        <th>大项目</th>
                        <th>金额(k)</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>状态</th>

                    </tr>
                    </thead>
                    <tbody>
                    {#   {% for obj in category.Done %}#}

                    {% for obj in queryset %}
                        <tr>
                            <td>{{ obj.SR_No }}</td>
                            <td>
                                <a href="{% url 'project_info' p_id=obj.id %}">{{ obj.customer }}</a>
                            </td>
                            <td>{{ obj.sa }}</td>
                            <td>{{ obj.get_category_display }}</td>
                            <td>{{ obj.get_software_display }}</td>
                            <td>{{ obj.version }}</td>
                            <td>{{ obj.server_num }}</td>
                            <td>{{ obj.mfd_num }}</td>
                            <td>{{ obj.printer_num }}</td>
                            <td>{{ obj.big_project }}</td>
                            <td>{{ obj.value }}</td>
                            <td>{{ obj.start_date }}</td>
                            <td>{{ obj.end_date }}</td>
                            <td>{{ obj.get_status_display }}</td>

                        </tr>
                    {% endfor %}


                    </tbody>
                </table>
            </div>
        </div>

        <!-- 导出project_csv 模态框 -->
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal-project">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 id="title-show" class="modal-title">
                            <i class="fa fa-cloud-download" aria-hidden="true"> PROJECT 导出</i>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-inline">
                            <form action="{% url 'export_project' %}" method="get" id="project-form">
                                <div class="row" style="margin-bottom: 15px">
                                    <div class="col-xs-6">
                                        <label for="exp_project_s_date">开始日期:</label>
                                        <input type="date" name="exp_project_s_date" id="exp_project_s_date"
                                               class="form-control">
                                    </div>
                                    <div class="col-xs-6">
                                        <label for="exp_project_e_date">结束日期:</label>
                                        <input type="date" name="exp_project_e_date" id="exp_project_e_date"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- 导出task_csv 模态框 -->
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal-task">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 id="title-show" class="modal-title">Task导出</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


    </div>
    <!-- 页码区域 -->
    <div class="container-fluid" style="display: flex; align-items: center; justify-content: flex-end">
        <ul class="pagination" style="margin-right: 10px">
            {{ page_string }}
        </ul>
        <div style="color: #2aabd2;font-weight: bolder">
            总计：{{ count }}
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        // 重置搜索
        function clearSearch_p() {
            $('#SR_name').val('');
            $('#owner_sa').val('')
            $('#p_status').val('all')
            $('#start_d').val('');
            $('#end_d').val('');
            $('#big_p').prop('checked', false);
            $('#p_name').val('');
        }

        // 滚动通知
        function roll() {
            // 1. 去HTMl中找到某个标签并获取化的内容（DOM）
            var tag = document.getElementById('txt');

            var dataString = tag.innerText;  //innerText 获取的是元素中显示的文本
            var dataHtml = tag.innerHTML;   //innerHTML 获取的是完整的 HTML 代码，包括标签。

            console.log('dataString:', dataString);
            console.log('dataHtml', dataHtml);

            //2,动态起来，把文本中的第一个字符放在字符串的后面
            // 下标
            var firstChar = dataString[0];
            // console.log('firstChar', firstChar);
            // 长度等于14， substring 取到13
            var otherString = dataString.substring(1, dataString.length);
            // console.log('otherString:', otherString)
            var newText = otherString + firstChar;

            console.log(newText);

            //3. 在Html标签中更新内容
            tag.innerText = newText;
        }

        // javaScript中的定时器， 如：每1s执行一次show函数。
        setInterval(roll, 700)


        $(function () {
            expSelect();
        })

        // 选择导出模式
        function expSelect() {
            const projectBtn = document.getElementById('export-pj');
            const taskBtn = document.getElementById('export-task');
            projectBtn.onclick = function () {
                $('#myModal-project').modal('show');
            };
            taskBtn.onclick = function () {
                $('#myModal-task').modal('show');
            };
        }


    </script>

{% endblock %}